<template>
  <el-dialog
    :title="rowId? '编辑文章' : '新增文章'"
    :visible="dialogVisible"
    width="50%"
    @close="btnCancel"
  >
    <!-- 表单 -->
    <el-form ref="formDataRef" :model="formData" label-width="85px" :rules="rules">
      <el-form-item label="文章标题:" prop="title">
        <el-input
          v-model="formData.title"
          placeholder="请输入文章标题"
        />
      </el-form-item>
      <el-form-item label="文章内容:" prop="articleBody" class="prantitem">
        <template>
          <quill-editor  v-model="formData.articleBody" 
          :options="editorOptions" ref="myQuillEditor"> </quill-editor>
        </template>
      </el-form-item>
      <el-form-item label="视频地址:" prop="videoURL">
        <el-input
          v-model="formData.videoURL"
          placeholder="请输入视频地址"
        />
      </el-form-item>
    </el-form>
    <el-row slot="footer" type="flex" justify="center" class="dialog-footer">
      <div>
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-row>
  </el-dialog>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { add, detail, update } from '../../api/hmmm/articles'
import { validateURL } from '../../utils/validate.js'
export default {
  name: 'addArticles',
  components: { quillEditor },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    rowId: {
      type: Number,
      default: null
    }
  },
  data () {
    const checkNameRepeat = validateURL()
    return {
      editorOptions: {
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ]
        }
      },
      formData: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [{ required: true, message: '文章标题不能为空', trigger: 'blur' }, {
          min: 1, max: 25, message: '文章标题为1-25位'
        }],
        videoURL: [{ validator: checkNameRepeat, trigger: 'blur' }]
      }
    }
  },
  created () {
  },

  methods: {
    async getarticlesById (rowId) {
      const { data } = await detail(rowId)
      console.log(rowId)
      this.formData = data
    },
    btnCancel () {
      this.formData = this.$options.data().formData
      this.$refs.formDataRef.resetFields()
      this.$emit('update:dialogVisible', false)
    },
    async btnOk () {
      try {
        await this.$refs.formDataRef.validate()
        if (this.formData.id) {
          await update(this.formData)
        } else {
          await add(this.formData)
        }

        this.$message({
          message: '操作成功',
          type: 'success',
          showClose: true,
          duration: 3000
        })
        this.$parent.dialogVisible = false
        this.$parent.getListInfo()
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style scoped>
.editor {
  line-height: normal !important;
  height: 500px;
}
/*
.elform {
  width: 100%;
}

.el-form-item__content {
  margin-left: 10px;
} */

/* .video { */
/* position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
  .video-ico {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .video-box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}

.left-fot {
  margin-left: 9px;
}
.el-row {
  margin-top: 10px;
}
.colInput {
  height: 35px;
}
.colright {
  float: right;
  height: 35px;
  margin-left: 10px;
}
.el-breadcrumb {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.inputCol {
  width: 200px;
}
.el-form-item {
  display: inline-block;
}
.el-table {
  margin-top: 10px;
}
.el-pagination {
  float: right;
  margin-top: 20px;
}
.elform {
  width: 100%;
}

.el-form-item__content {
  margin-left: 10px;
}
.fa-film:before {
  color: #0245a8;
} */
</style>
